<template>
  <div class="search-result">
    <!-- 搜索结果页面一级路由   $router.back()返回上一个页面-->
    <van-nav-bar
      left-arrow
      :title="$route.query.keyword + '的搜索结果'"
      fixed
      @click-left="$router.back()"
    />
    <!-- 列表组件 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="(item,index) in list" :key="index" :title="item.title" @click="$router.push('/article/'+item.art_id)" />
    </van-list>
  </div>
</template>

<script>
import { reqGetSearchResult } from '@/api/search'
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  methods: {
    // 数据没有占满屏幕会自动触发
    async onLoad() {
      const { data: { data: { results }}} = await reqGetSearchResult(this.$route.query.keyword, this.page)
      console.log(results)
      // 将返回的数组进行保存
      this.list.push(...results)
      // 将page自增
      this.page++
      // 手动将loading关闭
      this.loading = false
      // 数据请求结束的判断
      if (!results.length) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-result{
  padding-top: 46px;
}
</style>
